<template>
  <div class="access">
    <!-- 导航 -->
    <access-nav
      :accessList="accessList"
      :currentNav="currentNav"
      @changeCurrentNav="changeCurrentNav"
    ></access-nav>
    <!-- 下方详情列表 -->
    <access-list :noMoreData="noMoreData" :mountainList="mountainList" access="access"></access-list>
  </div>
</template>

<script>
import AccessNav from "./child/AccessNav";
import { getArticleTypeList, getArticleList } from "api/access";
import { throtTling } from "utils/throttling.js";
import { getScrollTop, getScrollHeight, getWindowHeight } from "utils/scroll";
export default {
  name: "Access",
  components: {
    AccessNav,
  },
  data() {
    return {
      // 导航信息
      accessList: [],
      // 山体列表
      mountainList: [],
      currentNav: 0,
      currentId: "",
      page: 1,
      limit: 6,
      // 没有更多数据 以及 是否触发滚动事件
      noMoreData: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("scroll", this.menu);
    });
    getArticleTypeList().then((res) => {
      if (res.code == 200) {
        this.accessList = res.data;
        this.currentId = this.accessList[0].id; 
        this.getArticleList();
      }
    });
  },
  methods: {
    getArticleList() { 
      let that = this;
      getArticleList(that.currentId, that.page, that.limit).then((res) => {
        if (res.code == 200) { 
          this.mountainList.push(...res.data.data);
        } else {
          this.noMoreData = true;
        }
      });
    },
    changeCurrentNav(index, id) { 
      let that = this;
      that.page = 1;
      that.mountainList = [];
      that.noMoreData = false;
      // taht.isScroll = true,
      that.currentNav = index;
      that.currentId = id;
      that.getArticleList();
    },
    menu: throtTling(function () {
      if (!this.noMoreData) {
        // 此时还有剩余数据未加载完
        let scroll = getScrollTop() + getWindowHeight() - getScrollHeight();
        if (scroll > -400) {
          //400：距离底部多少像素开始触发
          this.page += 1;
          this.getArticleList();
        }
      }
    }, 600),
  },

  //离开删除绑定事件
  beforeDestroy() {
    this.page = 1;
    window.removeEventListener("scroll", this.menu);
  },
};
</script>

<style lang="less" scoped>
.access {
  padding: 0 15px;
}
.access_swiper {
  margin: 10px 0;
  padding-bottom: 18px;
  height: 150px;
  border-bottom: 8px solid #f7f9fb;
  .my-swipe {
    height: 100%;
    .access_img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>